import {render} from 'lit-html';
export { html } from 'lit-html'

export function getProps(dataset) {
  let o = {}
  for (let key in dataset) {
    if (dataset[key]) {
      try {
        o[key] = window.JSON5.parse(dataset[key])
      } catch(e) {
        o[key] = dataset[key]
      }
    } else {
    }
  }
  return o
}

export class WebElement extends HTMLElement {
  constructor() {
    // 必须首先调用 super 方法
    super();
    // 元素的功能代码写在这里
  }
  connectedCallback() {
    var shadowroot = this.attachShadow({mode: 'open'})
    this.$props = getProps(this.dataset)
    render(this.render(), shadowroot)
    // this.appendChild(shadowroot)
    // console.log('connectedCallback')
    if (this.mounted) {
      this.mounted()
    }
  }
  disconnectedCallback() {
    console.log('Custom square element removed from page.');
  }
  attributeChangedCallback(name, oldValue, newValue) {
    // console.log('Custom square element attributes changed.', name, oldValue, newValue);
  }
  setAttribute(prop, value) {
    super.setAttribute(prop, value)
    this.$props = getProps(this.dataset)
  }
  getEle(getEle = (v) => {return v}) {
    return getEle(this.shadowRoot.children[0])
  }
}